import { FC } from "react";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {
  getComponentConfByType,
  ComponentPropsType,
} from "@/components/QuestionComponents";

import { useDispatch } from "react-redux";
import { changeComponentProps } from "@/store/componentReducer";

const NoProp = () => {
  return <div className="text-center">未选中组件</div>;
};

const ComponentProp: FC = () => {
  const dispatch = useDispatch();

  const { selectedComponent } = useGetComponentInfo();
  //   console.log(selectedComponent);
  if (selectedComponent == null) return <NoProp />;

  const { type, isLocked = false, isHidden = false } = selectedComponent;
  const componentConf = getComponentConfByType(type);
  console.log(componentConf);
  if (componentConf == null) return <NoProp />;

  const { PropComponent } = componentConf;
  //   console.log(PropComponent);
  if (PropComponent == null) return <NoProp />;

  function changeProps(newProps: ComponentPropsType) {
    if (selectedComponent == null) return;

    console.log("changeProps", newProps);
    dispatch(
      changeComponentProps({ fe_id: selectedComponent.fe_id, newProps })
    );
  }

  return (
    <PropComponent
      {...selectedComponent.props}
      onChange={changeProps}
      disabled={isLocked || isHidden}
    />
  );
};

export default ComponentProp;
